<script setup lang="ts">
import { reactive } from 'vue';

// 直接在返回的对象变量之后声明类型约束
type ToDo = {
  id: number;
  task: string;
  done: boolean;
  rating?: number; // 可选属性
};

const todo: ToDo = reactive({ id: 1, task: '敲代码', done: true });
todo.rating = 10;

// 也可以利用类型推导机制

const todo2 = reactive({ id: 1, task: '敲代码', done: true });
// todo2.id = '123' // 不行
todo2.id = 123;
// todo2.xxx = 123 // 不行
// todo2.rating = 5
</script>

<template>
  <div>TypeScript</div>
</template>

<style scoped></style>
